<template>
  <div>
    <div class="cert-box" id="certBox">
      <div class="left">
        <p class="title">专业等级证书</p>
        <p>本证书由工业和信息化部电子工业标准化研究院颁发，表明持有本证书由工业和信息化部电子工业标准化研究院颁发，表明持有本证书由工业和信息化部电子工业标准化研究院颁发，表明持有</p>
      </div>
      <div class="right">
        <div class="avator"></div>
        <div class="info">姓名</div>
        <div class="info">姓名</div>
        <div class="info">姓名</div>
        <div class="info">姓名</div>

      </div>
    </div>
    <div class="btn">
      <el-button
          type="primary"
          style="width: 100px;"
          @click.native.prevent="getPdf('testpdf','certBox')"
      >导出pdf
      </el-button>
    </div>


  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  },
  methods:{

  },
}
</script>

<style scoped lang="scss">
.cert-box{
  display: flex;
  width: 50%;
  height: 550px;
  margin: 0 auto;
  margin-top: 100px;
  background-image: url("../assets/images/certificate.png");
  background-size: 100% 100%;
  padding: 100px 100px;
  box-sizing: border-box;
  gap: 100px;
  .left{
    width: 50%;
    .title{
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 20px;
    }
  }
  .right{
    width: 48%;
  }

  .avator{
    width: 120px;
    height: 150px;
    border: 1px solid #000000;
    margin-bottom: 20px;
  }

}
.btn{
  text-align: center;
  margin-top: 30px;
}
</style>
